<template>
	<div class="nav-menu">
		<router-link v-for="(v, i) in layoutChildren" :key="i" :to="v.path">{{ v.meta && v.meta.title }}</router-link>
	</div>
</template>

<script lang="ts" setup>
import { layoutChildren } from '@/router';
</script>


<style scoped lang='scss'>
.nav-menu {
	height: 46px;
	background-color: skyblue;
	display: flex;
	justify-content: space-around;
	align-items: center;

	a {
		color: #000;
		text-decoration: none;

		&.router-link-active,
		&.router-link-exact-active {
			color: red;
		}
	}
}
</style>